<template>
	<div :class="getClasses()">
		<slot></slot>
	</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, PropType } from 'vue';

const constants = {
	row: 'row',
	column: 'column',
	justify: 'justify',
	self: 'self',
	align: 'items',
	gutter: 'q-gutter',
	gutterWithCol: 'q-col-gutter',
};

export default defineComponent({
	name: 'HRow',

	props: {
		column: { type: Boolean, default: false },
		self: { type: Boolean, default: false },
		align: { type: String as PropType<'none' | 'start' | 'center' | 'end'>, default: 'none' },
		justify: { type: String as PropType<'none' | 'center' | 'end' | 'around' | 'between' | 'evenly'>, default: 'none' },
		gutter: { type: String as PropType<'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'>, default: 'none' },
		gutterCol: { type: Boolean, default: false },
		/**
		 * horizontal gutter
		 */
		horizontal: { type: Boolean, default: false },
		/**
		 * vertical gutter
		 */
		vertical: { type: Boolean, default: false },
	},

	setup(props) {
		const classes: string[] = reactive([]);

		const createBase = () => {
			return props.column ? constants.column : constants.row;
		};

		const createGutter = (size = '', direction = '') => {
			let result = constants.gutter;
			if (props.gutterCol) {
				result = constants.gutterWithCol;
			}

			if (direction) {
				result = result + '-' + direction;
			}

			result = result + '-' + size;

			return result;
		};

		const createJustify = () => {
			if (props.justify !== 'none') {
				return constants.justify + '-' + props.justify;
			} else {
				return '';
			}
		};

		const createAlign = () => {
			if (props.align !== 'none') {
				let result = constants.align;
				if (props.self) {
					result = constants.self;
				}
				return result + '-' + props.align;
			} else {
				return '';
			}
		};

		const createHorizontalGutter = (size: string) => {
			return createGutter(size, 'x');
		};

		const createVerticalGutter = (size: string) => {
			return createGutter(size, 'y');
		};

		const appendClass = (value: string): void => {
			if (value) {
				classes.push(value);
			}
		};

		const getClasses = (): string => {
			if (classes.length > 1) {
				return classes.join(' ') as string;
			} else if (classes.length === 1) {
				return classes[0];
			} else {
				return constants.row;
			}
		};

		const initialize = () => {
			appendClass(createBase());
			appendClass(createJustify());
			appendClass(createAlign());

			if (props.gutter !== 'none') {
				if (!props.horizontal && !props.vertical) {
					appendClass(createGutter(props.gutter));
				} else {
					if (props.horizontal) {
						appendClass(createHorizontalGutter(props.gutter));
					}

					if (props.vertical) {
						appendClass(createVerticalGutter(props.gutter));
					}
				}
			}
		};

		onMounted(() => {
			initialize();
		});

		return { getClasses };
	},
});
</script>
